<template>
  <div class="information-wrapper" v-if="!updatePassword">
    <div class="information-header" style="margin-bottom: 0">
      <h2>
        {{$t("accountInfo.title")}}
      </h2>
    </div>
    <div class="content-wrapper">
      <div class="content-item">
        <div class="item-label" :style="{width: locale==='EN'? '110px':'110px'}">
          {{$t("accountInfo.institutionName")}}
        </div>
        <el-input
          :placeholder="$t('accountInfo.input')"
          v-model="organizationNameValue"
          size="large"
          style="width: 300px"
          class="input__default_theme"
        />
      </div>
      <div class="content-item">
        <div class="item-label" :style="{width: locale==='EN'? '110px':'110px'}">
          {{$t("accountInfo.name")}}
        </div>
        <el-input
          :placeholder="$t('accountInfo.input')"
          :model-value="accountName"
          size="large"
          style="width: 300px"
          readonly
          class="input__default_theme not-allowed"
        />
      </div>
      <div class="content-item">
        <div class="item-label" :style="{width: locale==='EN'? '110px':'110px'}">
          {{$t('accountInfo.vip')}}
        </div>
        <el-input
          :placeholder="$t('accountInfo.input')"
          :model-value="vipExpired"
          readonly
          style="width: 300px"
          size="large"
          class="input__default_theme vip-input"
        />
        <img src="@/assets/renewal.png" alt="renewal" class="renewal" />
      </div>
    </div>
    <div class="password">
      <span @click="updatePassword = true">{{$t('accountInfo.password')}}></span>
    </div>
    <div style="margin-top: 20px; text-align: center">
      <el-button size="large" type="primary" class="buttons-primary">
        {{$t('accountInfo.save')}}</el-button>
    </div>
  </div>
  <div class="information-wrapper" v-else>
    <div class="information-header">
      <h2>{{$t('accountInfo.password')}}</h2>
    </div>
    <div style="margin-top: 10px">
      <UpdatePassword @cancel="updatePassword = false" ref="passwordInstance" />
    </div>

  </div>
</template>
<script setup lang="ts">
import UpdatePassword from "@cs/Password/Update-Password.vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useUserInfoStore } from "@/stores/user";


const account = useUserInfoStore();
const organizationName = "IF EDTech";
const accountName = account.userInfo?.user?.username;
const vipExpired = "2024/01/01 - 2026/01/01";

const organizationNameValue = ref(organizationName);
const saveEnable = computed(() => organizationNameValue.value !== organizationName);
const updatePassword = ref(false);
const passwordInstance = ref();
const {locale} = useI18n();
const onUpdatePassword = () => {
  if (passwordInstance.value) {
    passwordInstance.value.onValidate((result: boolean) => {
      console.log(result);
    });
  }
};
</script>
<style scoped lang="scss">
@import "@/theme";

.back {
  position: absolute;
  left: calc($question-generation-left-side-width + 20px);
  transform: translateY(20px);
  font-size: 22px;
  color: #656565;
  padding: 5px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  cursor: pointer;

  &:hover {
    background-color: #f1f1f1;
  }
}

.information-wrapper {
  position: relative;
  width: 50%;
  min-width: 220px;
  max-width: 480px;
  padding: 0 20px;

  .information-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content-wrapper {
    min-width: 220px;

    .content-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      margin: 20px 0;

      div.item-label {
        font-weight: 600;
        font-size: 17px;

        width: 140px;
        text-align: right;
        margin-right: 10px;
      }

      .div.item-label:first-of-type {
        margin-top: 0;
      }
    }
  }

  .password {
    margin-top: 15px;
    text-align: right;

    span {
      font-size: 16px;
      color: #11b734;
      cursor: pointer;
      height: 24px;
      display: inline-block;
      border-bottom: 1px solid #11b734;
    }
  }
}

.renewal {
  width: 45px;
  position: absolute;
  transform: translate(-80px, 5px);
  cursor: pointer;
  transition: width 0.2s;
  right: 0;
  &:hover {
    width: 50px;
  }
}

.vip-input {
  @extend .not-allowed;

  :deep(.el-input__inner) {
    color: #ff8421;
  }
}

.not-allowed {
  :deep(.el-input__inner) {
    cursor: not-allowed;
  }
}
</style>
